<template>
	<view class="log-on">
		<!-- 师傅端登录 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view class="" slot="center"><text class="c-000 pf-sc fw-600" style="font-size: 34rpx;"></text>
			</view>
		</u-navbar>
		<view class="log-on-container w-750 b-box  bg-ff po-re" style="overflow-y: scroll;"
			:style="{height:containerHeight}">
			<view style="margin-bottom: 82rpx;" class="">
				<view class="w-750 b-box d-flex flex-r ali-i-e just-c" style="height: 300rpx;margin-bottom: 30rpx;">
					<image :src="require('../static/login_log.png')" style="width: 198rpx;height: 198rpx;" mode="">
					</image>
				</view>
				<view class="w-750 b-box d-flex flex-r ali-i-c just-c">
					<text class="fw-500 pf-sc c-333" style="font-size: 50rpx;">车净净师傅端</text>
				</view>
			</view>
			<!--  -->
			<view class="w-750 b-box" style="padding: 0 74rpx;margin-bottom: 60rpx;">
				<view class="flex-c ali-i-s just-s"
					style="padding-bottom: 34rpx;margin-top: 44rpx;border-bottom: 2rpx solid #F1F1F1;">
					<u-input border="none" placeholder="请输入账号"
						:customStyle="{color:'#222222',font:'400 30rpx PingFang SC'}"
						:placeholderStyle="{color:'#999999',fontWeight: '400',fontsize:'30px',fontfamily: 'PingFang SC-Regular, PingFang SC'}"
						v-model="requetParams.userName"></u-input>
				</view>
				<view class="flex-c ali-i-s just-s po-re"
					style="padding-bottom: 34rpx;margin-top: 44rpx;border-bottom: 2rpx solid #F1F1F1;">
					<u-input border="none" placeholder="请输入密码" :password="showPwd"
						:customStyle="{boxSizing:'border-box',paddingRight:'60rpx',color:'#333333',font:'400 30rpx PingFang SC'}"
						:placeholderStyle="{color:'#999999',fontWeight: '400',fontsize:'30px',fontfamily: 'PingFang SC-Regular, PingFang SC'}"
						v-model="requetParams.userPwd"></u-input>
					<view class="po-ab" style="right: 0;top:5rpx">
						<image v-if="showPwd" @click="ShowPwd" :src="require('../static/showpwd.png')"
							style="width: 40rpx;height: 24rpx;" mode=""></image>
						<image v-else @click="ShowPwd" :src="require('../static/hidepwd.png')"
							style="width: 40rpx;height: 24rpx;" mode=""></image>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="w-750 b-box  d-flex flex-r ali-i-c just-c">
				<u-button :throttleTime="700" @click="Login" :disabled="btnDisabled" :customStyle="{height:'84rpx',width:'602rpx',
					font:'400 32rpx PingFang SC',color:'#ffffff',borderWidth:'0rpx',background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
					borderRadius:'44rpx'}" shape="square" text="登录">
				</u-button>
			</view>
			<!-- 联系客服 -->
			<view class="w-750 b-box d-flex flex-r ali-i-c just-c po-ab" style="bottom: 88rpx;left: 0;right: 0;">
				<view class="d-flex flex-r ali-i-c just-c" @click="Contact">
					<view style="width: 38rpx;height: 38rpx;margin-right:12rpx">
						<image :src="require('../static/kefu.png')" style="width: 38rpx;height: 38rpx;"></image>
					</view>
					<text class="pf-sc fw-400 " style="color: #999999;font-size: 30rpx;">联系客服</text>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<Contact-the-customer ref="customModel" :show="ModelShow" :top="'30rpx'" :confirmText="confirmText"
			:success="ModelStatus" :cancelText="cancelText" :height="height"
			 :Cancelcolor="Cancelcolor" :color="color"  :userName="userName" :showCloseIcon="showCloseIcon" @cancel="ModelCancel" @confirm="ModelConfirm"
			:title="ModelTitle" />
	</view>
</template>

<script>
	import ContactTheCustomer from '../components/Contact-the-customer/Contact-the-customer.vue'
	import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
	import Uinput from '../components/uview-ui/components/u-input/u-input';
	import Ubutton from '../components/uview-ui/components/u-button/u-button';
	import Utoast from '../components/uview-ui/components/u-toast/u-toast';
	import {
		_containerHeight
	} from '@/utils/GetSys.js';
	export default {
		components: {
			'u-navbar': Unavbar,
			'u-input': Uinput,
			'u-button': Ubutton,
			'u-toast': Utoast,
			'Contact-the-customer':ContactTheCustomer
		},
		data() {
			return {
				containerHeight: '',
				btnDisabled: false,
				showPwd: true,
				requetParams: {
					userName: '',
					userPwd: '',
				},
				ModelShow:false,
				ModelStatus:false,  //客服
				ModelTitle:'',
				confirmText:'',
				cancelText:'',
				color:'',
				height:'',
				userName:'',
				showCloseIcon:'',
				Cancelcolor:''
			};
		},
		watch: {
			requetParams: {
				handler(newVal) {
					(newVal.userName === '' || newVal.userPwd === '') ? this.btnDisabled = true: this.btnDisabled = false;
				},
				deep: true
			}
		},
		onShow() {
			
		},
		methods: {
			Login() {
				this.$refs.uToast.show({
					message: '登录成功',
					duration: 1000,
					complete() {
						uni.reLaunch({
							url:`/pages/UserHomePage/UserHomePage?UserPage=1`
						})
					}
				});

			},
			ShowPwd() {
				this.showPwd = !this.showPwd;
			},
			Contact(data){  //联系客服
			console.log(data);
				// 弹出客服联系电话模态框
				this.ModelStatus=false;  //客服
				this.ModelTitle='客服电话：400-1256-7826';
				this.confirmText='拨打电话';
				this.cancelText='取消';
				this.Cancelcolor='#999999';
				this.color='#FF5C00';
				this.height='110rpx';
				this.userName='';
				this.showCloseIcon=false;
				this.ModelShow=true;
			},
			ModelCancel() { //关闭模态框
				this.ModelShow = false;
				
			},
			ModelConfirm() {  
				this.ModelShow = false;
				uni.makePhoneCall({
					phoneNumber:`${40012567826}`,
					complete(e) {
						console.log(e);
					}
				})
				
			},
		},
		onLoad() {
			this.containerHeight = _containerHeight();
		}
	}
</script>

<style lang="scss">
	.log-on {
		.log-on-container {}
	}
</style>
